<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>shake</title>
    <style rel="stylesheet" type="text/css">
        *{
            box-sizing: border-box;
        }
        body{
            background: cornflowerblue;
        }
        .phone{
            width: 400px;
            height: 800px;
            background: #ffffff;
            border: 1.5px solid #000000;
            text-align: center;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin:auto;
            border-radius: 60px;
            animation: shake 2s ease infinite;
        }
        .screen{
            background: #000000;
            width: 90%;
            height: 72%;
            margin: 0 auto;
            transform: translateY(18%);
            position: center;

        }
        .btn{
            border: 1.5px solid #000000;
            border-radius: 50%;
            width: 80px;
            height: 80px;
            bottom:2%;
            left: 50%;
            transform: translateX(-50%);
            position: absolute;
        }
        .receiver{
            position: absolute;
            background: black;
            width: 25%;
            height: 10px;
            top:6%;
            left: 40%;
            border-radius: 5px;
            border: 1px solid #ffffff;
        }
        .circle{
            width: 15px;
            height: 15px;
            background: black;
            border-radius: 50%;
            left: -40%;
            position: absolute;
            transform: translateY(-40%);

        }
        .show{
            font-size: 40px;
            font-weight: bold;
            line-height: 560px;
            text-align: center;
            color:#ffffff;
        }
        .circle2{
            width: 10px;
            height: 10px;
            background: black;
            border-radius: 50%;
            left: 50%;
            top:3%;
            position: absolute;
        }

        @keyframes shake {
            from{
                transform: rotate(0deg);
            }
            4%{
                transform: rotate(10deg);
            }
            12.5%{
                transform: rotate(-10deg);
            }
            21%{
                transform: rotate(10deg);
            }
            29%{
                transform: rotate(-10deg);
            }
            37.5%{
                transform: rotate(10deg);
            }
            46%{
                transform: rotate(-10deg);
            }
            50%,to{
                transform: rotate(0deg);
            }
        }
    </style>
</head>
<body>

    <div class="phone">
        <div class="screen">
            <span id='show' class="show">
                摇一摇 有好礼
            </span>
        </div>
        <div class="btn"></div>
        <div class="receiver">
            <span class="circle"></span>
        </div>
        <div class="circle2"></div>
    </div>


<script>
    if (window.DeviceMotionEvent) {
        window.addEventListener('devicemotion', shake) //devicemotion:获取设备的运动状态
    } else {
        document.getElementById('show').innerHTML = '换部手机试试~'
    }
    let max = 500;   //晃动最大值，阈值
    let x, y, z, lastX, lastY, lastZ = 0;  //初始化x,y,z轴的加速度
    let lastTime, currentTime;
    lastTime = new Date().getTime();

    function shake(e) {
        let a = e.accelerationIncludingGravity; //获取加速度
        x = a.x;   //x,y,z轴上的加速度
        y = a.y;
        z = a.z;
        currentTime = new Date().getTime();
        //console.log(currentTime-lastTime);两次时间差
        if ((currentTime - lastTime) > 1000) {
            //这行的大致意思就是摇的越快，speed值越高
            var speed_ = Math.abs(x + y + z - lastX - lastY - lastZ) / (currentTime - lastTime) * 10000;
            document.getElementById('show').innerHTML = speed_.toFixed(2);
            lastTime = currentTime;
            lastX = x;
            lastY = y;
            lastZ = z;
        }
        if (speed_>max){
            window.removeEventListener('devicemotion',shake);
            document.getElementById('show').innerHTML = '来了老弟！'
        }
    }
</script>
</body>
</html>